.c-red {
  color: red;
}
.c-999 {color: #999;}
.c-333 {color: #333;}
.c-606266 {color: #606266;}
.c-E6A23C {color: #E6A23C;}
.c-70bd46 {color: #70bd46;}
.c-409eff {color: #409eff;}

.bc-f5f7fa {background-color: #f5f7fa;}
.bc-ddd {background-color: #ddd;}
.bc-999 {background-color: #999;}
.bc-ccc {background-color: #ccc;}

$fzList: 12,14,16,18,20,24,32,48,64;
@each $var in $fzList {
  .fz-#{$var} {font-size: #{$var}px;}
}

.fw-bold {font-weight: bold;}

.ta-c {text-align: center;}
.ta-r {text-align: right;}

$mgList: 0,2,4,5,10,15,16,20,30,36,40,50,60,80,100,160,200;
@each $var in $mgList {
  .mb-#{$var} {margin-bottom: #{$var}px!important;}
  .mt-#{$var} {margin-top: #{$var}px!important;}
  .ml-#{$var} {margin-left: #{$var}px!important;}
  .mr-#{$var} {margin-right: #{$var}px!important;}
  .mg-#{$var} {margin: #{$var}px!important;}
  .mtb-#{$var} {margin: #{$var}px 0!important;}
  .mlr-#{$var} {margin: 0 #{$var}px!important;}
  .pb-#{$var} {padding-bottom: #{$var}px!important;}
  .pt-#{$var} {padding-top: #{$var}px!important;}
  .pl-#{$var} {padding-left: #{$var}px!important;}
  .pr-#{$var} {padding-right: #{$var}px!important;}
  .pd-#{$var} {padding: #{$var}px!important;}
  .ptb-#{$var} {padding: #{$var}px 0!important;}
  .plr-#{$var} {padding: 0 #{$var}px!important;}
  .t-#{$var} {top: #{$var}px!important;}
  .b-#{$var} {bottom: #{$var}px!important;}
  .l-#{$var} {left: #{$var}px!important;}
  .r-#{$var} {right: #{$var}px!important;}
}

$wdList: 0,16,20,24,32,40,50,80,100, 120,150,180,200,240,280,300,320,400;
@each $var in $wdList {
  .w-#{$var} {width: #{$var}px!important;}
  .maxw-#{$var} {max-width: #{$var}px;}
  .minw-#{$var} {min-width: #{$var}px;}
  .h-#{$var} {height: #{$var}px;}
  .maxh-#{$var} {max-height: #{$var}px;}
  .minh-#{$var} {min-height: #{$var}px;}
  .lh-#{$var} {line-height: #{$var}px!important;}
}
.w-unset {width: unset;}
.w-100p {width: 100%;}
.w-99p {width: 99%;}
.w-90p {width: 90%;}

.p-r {position: relative;}
.p-a {position: absolute;}

.d-f {display: flex;}
.d-if {display: inline-flex;}
.d-ib {display: inline-block;}
.d-b {display: block;}

.ai-c {align-items: center;}
.jc-sb {justify-content: space-between;}

.fl {float: left;}
.fr {float: right;}

.pe-n {pointer-events:none;}

.cs-p {cursor: pointer;}
.cs-nt {cursor: not-allowed;}

.bd-b-ef {border-bottom: 2px solid #efefef;}
.bd-r-2 {border-radius: 2px;}

.of-a {overflow: auto;}